<template>
  <div>
    <router-view></router-view>
    <div v-if="this.$route.name === '用户管理'">
      <div class="con">
        <el-input
          class="el-input"
          placeholder="请输入要查询的用户"
          prefix-icon="el-icon-search"
          v-model="msg"
          clearable
        ></el-input>
        <el-button type="primary" class="bnt1" @click="selectUser"
          >查询</el-button
        >
      </div>
      <br />
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="user_image_road" label="头像">
          <template slot-scope="scope">
            <span>{{ scope.row.user_image_road }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="user_id" label="用户id"> </el-table-column>
        <el-table-column prop="user_name" label="用户姓名"> </el-table-column>
        <el-table-column prop="user_sex" label="性别">
          <template slot-scope="scope">
            <span v-if="scope.row.user_sex === 0">未设置</span>
            <span v-if="scope.row.user_sex === 1">男</span>
            <span v-if="scope.row.user_sex === 2">女</span>
          </template>
        </el-table-column>
        <el-table-column prop="user_state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.user_state === 0">正常</span>
            <span v-if="scope.row.user_state === 1">禁言</span>
            <span v-if="scope.row.user_state === 2">禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="handleClose(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="success"
              @click="viewDetails(scope.$index, scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        class="dialog"
        title="修改信息"
        :visible.sync="dialogVisible"
        :show-close="false"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="radio" label="状态">
            <el-radio-group v-model="ruleForm.radio">
              <el-radio :label="0">正常</el-radio>
              <el-radio :label="1">禁言</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="escButton()">取消</el-button>
          <el-button @click="changeUser()" type="primary">修改</el-button>
        </div>
      </el-dialog>
      <br />
      <!-- 查看详细信息 -->
      <el-dialog
        :visible.sync="hidden"
        width="80%"
        :before-close="viewDetails"
        :show-close="false"
      >
        <div class="box">
          <div class="left">
            <p class="text">基本信息</p>
            <span>用户id：{{ userId }}</span
            ><br />
            <span>用户名：{{ userName }}</span
            ><br />
            <span>出生日期：{{ userBirthday }}</span
            ><br />
            <span>用户星座：{{ user_constellation }}</span
            ><br />
            <span>用户等级：{{ user_level }}</span
            ><br />
            <span>等级分数：{{ user_score }}</span
            ><br />
            <span>关注数量：{{ user_follow_number }}</span
            ><br />
            <span>注册日期：{{ user_date }}</span
            ><br />
            <span>地区：{{ region_name }}</span
            ><br />
            <span>地区id：{{ region_id }}</span>
            <div>
              <p class="text">用户签名</p>
              <div>{{ this.user_signer }}</div>
            </div>
          </div>
          <div class="center">
            <p class="text">下载信息</p>
            <div class="load" v-for="(item, index) in onload" :key="index">
              <div>应用id：{{item.app.app_id}}</div>
              <div>下载用户id：{{item.user.user_id}}</div>
              <div>下载记录id：{{ item.user_downloding_record_id }}</div>
              <div>下载耗时：{{ item.downloding_time }}小时</div>
              <div>
                下载状态：<span v-if="item.downloding_state === 0"
                  >网络下载</span
                >
                <span v-if="item.downloding_state === 1">流量下载</span>
              </div>
              <div>下载时间：{{item.downloding_date}}</div>
            </div>
          </div>
          <div class="right">
            <p class="text">收藏信息</p>
            <div v-for="(item,index) in like" :key="index">
              <div>用户id：{{item.user_id}}</div>
              <div>收藏单id：{{item.userCollect.collect_id}}</div>
              <div>用户收藏信息id：{{item.user_collect_massage_id}}</div>
              <div>应用类别名称：{{item.app_type_name}}</div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="escView">取 消</el-button>
          <el-button type="primary" @click="conView">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页器 -->
      <el-pagination
        @current-change="changePage"
        v-show="shows"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        background
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import http from '../api/index';
// import axios from 'axios';
export default {
  data() {
    return {
      msg: '',
      currentPage: 1, //当前页
      pageSize: 5, //每页数据量
      total: 0, //总数据量
      selectTotal: 0, //查询总数据量
      dialogVisible: false,
      userName: '', //用户名
      userId: '', //用户id
      userImg: '',
      userBirthday: '',
      user_constellation: '',
      user_follow_number: 0,
      user_date: '',
      user_level: '',
      user_score: 0,
      user_signer: '',
      region_id: 0,
      region_name: '', //地区名
      id: '',
      show: false,
      shows: true,
      showes: false,
      hidden: false,
      like: [],
      onload: [],
      ruleForm: {
        radio: '',
        resource: '',
      },
      rules: {
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' },
        ],
        radio: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        // user: [{ validator: validateUser, trigger: 'blur' }],
      },
      list: [],
    };
  },
  mounted() {
    http
      .userPage({
        pages: 1,
      })
      .then((r) => {
        console.log(r);
        this.list = r.data;
        this.total = parseInt(r.msg);
        console.log(this.total);
      });
  },
  watch: {
    // 如果msg为空，让分页器出现
    msg(val) {
      if (val === '') {
        this.shows = true;
        http
          .userPage({
            pages: 1,
          })
          .then((r) => {
            console.log(r);
            this.list = r.data;
            this.total = parseInt(r.msg);
            console.log(this.total);
          });
      }
    },
  },
  methods: {
    // 取消查看详细信息
    escView() {
      this.hidden = false;
    },
    //
    conView() {
      this.hidden = false;
    },
    // 查看详细信息
    viewDetails(index, row) {
      // this.onload = row;
      // this.like = row;
      this.userName = row.user_name;
      this.userId = row.user_id;
      this.userImg = row.user_background_image_road;
      this.userBirthday = row.user_birthday;
      this.user_constellation = row.user_constellation;
      this.user_date = row.user_date;
      this.user_level = row.user_level;
      this.user_score = row.user_score;
      this.user_signer = row.user_signer;
      this.region_id = row.region.region_id;
      this.region_name = row.region.region_name;
      this.user_follow_number = row.user_follow_number;
      // 下载
      http
        .userOnload({
          user_id: row.user_id,
        })
        .then((r) => {
          console.log(r);
          this.onload = r;
        });
      console.log(row.user_id);
      // 收藏
      http
        .userLike({
          user_id: row.user_id,
        })
        .then((r) => {
          console.log(r);
          this.like = r;
        });
      this.hidden = true;
    },
    // 查询
    selectUser() {
      if(this.msg===''){
         alert('输入框不能为空');
      }else{
        this.shows = false;
      http
        .selectUser({
          user_name: this.msg,
        })
        .then((r) => {
          console.log(r);
          this.list = r.data;
          this.selectTotal = parseInt(r.msg);
          console.log(this.total);
        });
      console.log(this.msg);
      }
    },
    // 分页
    changePage(val) {
      this.currentPage = val;
      // console.log(val);
      http
        .userPage({
          pages: val,
        })
        .then((r) => {
          console.log(r);
          this.list = r.data;
          this.total = parseInt(r.msg);
          console.log(val);
        });
    },
    openImage() {
      this.show = true;
    },
    closeImage() {
      this.show = false;
    },
    // 修改
    handleClose(index, item) {
      this.ruleForm.radio = item.user_state;
      this.id = item.user_id;
      console.log(this.id);
      console.log(this.ruleForm.radio);
      this.dialogVisible = true;
    },
    // 修改用户权限成功
    changeUser() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          http
            .updataUserStatus({
              user_id: this.id,
              user_state: this.ruleForm.radio,
            })
            .then((res) => {
              console.log(res);
              http
                .userPage({
                  pages: this.currentPage,
                })
                .then((r) => {
                  console.log(r);
                  this.list = r.data;
                  this.total = parseInt(r.msg);
                  console.log(this.total);
                });
              // location.reload();
            });
          this.dialogVisible = false;
        }
      });
    },
    escButton() {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
      this.dialogFormVisible = false;
    },
  },
  computed: {
    showList() {
      let arr = [];
      for (var i = 0; i < this.list.length; i++) {
        // console.log(this.totalList[i].id);
        if (this.list[i].username.indexOf(this.msg) !== -1) {
          arr.push({
            username: this.list[i].username,
            care: this.list[i].care,
            fun: this.list[i].fun,
            status: this.list[i].status,
          });
        }
      }
      return arr;
    },
  },
};
</script>
<style scoped>
.el-input {
  width: 400px;
}
.el-card {
  margin-left: 0px;
  margin-top: 20px;
  position: relative;
}
.bnt1 {
  margin-left: 10px;
}
.touxiang {
  display: inline-block;
  margin-left: 10px;
  margin-top: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: silver;
}
.sp1 {
  position: absolute;
  left: 83px;
  top: 9px;
}
.sp2 {
  position: absolute;
  top: 33px;
}
.score {
  display: inline-block;
  width: 100px;
  height: 70px;
  margin-left: 8px;
  margin-top: 0px;
  text-align: center;
}
.scores {
  line-height: 40px;
  font-size: 20px;
}
.level {
  display: inline-block;
  width: 100px;
  height: 70px;
  margin-left: -26px;
  margin-top: 0px;
  text-align: center;
}
.sp3 {
  font-size: 14px;
  position: relative;
  top: 7px;
}
.status {
  display: inline-block;
  position: relative;
  top: -10px;
  left: 20px;
  color: red;
}
.icon {
  position: relative;
  top: -10px;
  color: blue;
  left: 90px;
}
.back {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: silver;
  margin-top: -30px;
}
.elbtn {
  margin-left: 115px;
  margin-top: 10px;
}
.elbutton {
  position: relative;
  left: 60px;
  top: -10px;
}
.head {
  margin-left: -63px;
}
.box {
  margin-top: -42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left {
  width: 300px;
  height: 300px;
}
.center {
  width: 300px;
  height: 300px;
}
.right {
  width: 300px;
  height: 300px;
}
.text{
  color: rgb(89, 89, 241);
  font-size: 20px;
  margin-left: -6px;
}
.load{
  
  border: 1px solid #cccccc;
}
</style>